<script setup lang="ts">
import BooKDisplayComponent from 'src/components/BooKDisplayComponent.vue'
import BookCanvasComponent from 'src/components/BookCanvasComponent.vue'
import { useDoublePuzzleStore } from 'src/stores/double-puzzle-store'
import GlobalGridComponent from 'src/components/GlobalGridComponent.vue'
import GlobalTextComponent from 'src/components/GlobalTextComponent.vue'
import AppExportComponent from 'src/components/CreateBook/AppExportComponent.vue'
import { string2List } from 'src/utils/LeaferUtil'
import { computed } from 'vue'
import { DoublePuzzle, shuffle_array } from 'src/utils/generate_double_puzzle'
import { useGlobalGridStore } from 'src/stores/global-grid-store'
import { useLearferAppStore } from 'src/stores/leafer-app-store'
import { useGlobalTextStore } from 'src/stores/global-text-store'
import { useCanvasStore } from 'src/stores/canvas-store'

const canvas_store = useCanvasStore()
const puzzle_store = useDoublePuzzleStore()
const global_grid_store = useGlobalGridStore()
const global_text_store = useGlobalTextStore()
const frame_store = useLearferAppStore()
const word_list = computed<string>({
  get() {
    return puzzle_store.word_list.join('\n')
  },
  set(new_val: string) {
    puzzle_store.word_list = string2List(new_val)
  },
})
// 计算显示字母
const reveal_letters = computed<string>({
  get() {
    return puzzle_store.reveal_letters.join(',')
  },
  set(new_val: string) {
    new_val = new_val.toUpperCase()
    puzzle_store.reveal_letters = new_val.split(',')
  },
})

// 打乱单词
const random_words = (words: string[]) => {
  return shuffle_array(words)
}

// 生成双重拼图
const generate_double_puzzle = () => {
  // 创建一个 doubule_puzzle 对象
  global_grid_store.text = global_text_store.$state
  puzzle_store.title.font.font_name = global_text_store.font.font_name
  puzzle_store.instruction.font.font_name = global_text_store.font.font_name
  const doubule_puzzle = new DoublePuzzle(
    canvas_store.canvas,
    puzzle_store.title,
    puzzle_store.instruction,
    puzzle_store.word_list,
    global_grid_store.grid_style,

    [puzzle_store.message_text],
    puzzle_store.reveal_letters,
    puzzle_store.max_wordlen,
    global_grid_store.grid_style,
    global_grid_store.grid_style,
    puzzle_store.reveal_letter_location
  )

  doubule_puzzle.generate_puzzle()

  const anw_frame = doubule_puzzle.get_answer_frame()
  const topic_frame = doubule_puzzle.get_topic_frame()
  frame_store.clear()
  frame_store.add('ans', anw_frame)
  frame_store.add('topic', topic_frame)
  frame_store.draw()
}
</script>
<template>
  <q-page padding>
    <h4 class="">双重拼图制作器</h4>
    <h5>用于生成可打印的双拼图工作表</h5>
    <div class="row">
      <div class="col-3">
        <div style="padding-right: 5%">
          <q-form>
            <!-- 主标题 -->
            <div class="row">
              <div class="col-8 q-pb-sm q-pr-sm">
                <q-input
                  outlined
                  v-model="puzzle_store.title.text"
                  label="标题"
                  :input-style="{ color: puzzle_store.title.font.font_color }"
                >
                  <template v-slot:append>
                    <q-icon name="colorize" class="cursor-pointer">
                      <q-popup-proxy
                        cover
                        transition-show="scale"
                        transition-hide="scale"
                      >
                        <q-color v-model="puzzle_store.title.font.font_color" />
                      </q-popup-proxy>
                    </q-icon> </template
                ></q-input>
              </div>
              <div class="col-4 q-pb-sm q-pr-sm">
                <q-input
                  outlined
                  v-model.number="puzzle_store.title.font.font_size"
                  label="标题尺寸"
                  type="number"
                />
              </div>

              <div class="col-8 q-pr-sm">
                <q-input
                  outlined
                  v-model="puzzle_store.instruction.text"
                  label="副标题"
                  :input-style="{
                    color: puzzle_store.instruction.font.font_color,
                  }"
                >
                  <template v-slot:append>
                    <q-icon name="colorize" class="cursor-pointer">
                      <q-popup-proxy
                        cover
                        transition-show="scale"
                        transition-hide="scale"
                      >
                        <q-color
                          v-model="puzzle_store.instruction.font.font_color"
                        />
                      </q-popup-proxy>
                    </q-icon>
                  </template>
                </q-input>
              </div>
              <div class="col-4 q-pr-sm">
                <q-input
                  outlined
                  v-model.number="puzzle_store.instruction.font.font_size"
                  label="副标题尺寸"
                  type="number"
                />
              </div>
            </div>
            <!-- 副标题 -->
            <q-separator spaced />
            <BookCanvasComponent />
            <q-separator spaced />
            <GlobalTextComponent />
            <!-- 单词列表 -->
            <div class="row">
              <div class="col-8 q-pb-sm q-pr-sm">
                <q-input
                  v-model="word_list"
                  filled
                  type="textarea"
                  label="单词列表"
                />
                <div class="row q-pt-sm q-gutter-sm justify-around">
                  <div class="col-3">
                    <q-btn
                      style="width: 100%"
                      color="primary"
                      label="打乱"
                      @click="random_words(puzzle_store.word_list)"
                    />
                  </div>

                  <div class="col-3">
                    <q-btn style="width: 100%" color="primary" label="大写" />
                  </div>
                  <div class="col-3">
                    <q-btn style="width: 100%" color="primary" label="小写" />
                  </div>
                </div>
              </div>

              <div class="col-4"><GlobalGridComponent /></div>
            </div>
            <q-separator spaced />
            <!-- 正方形宽度大小 -->
            <!--
              TOOD 实现拼图大小的改变
            -->

            <div class="q-pb-sm q-pr-sm">
              <q-input
                v-model="puzzle_store.message_text"
                label="消息"
                outlined
              />
            </div>
            <div class="row">
              <div class="col-4 q-pb-sm q-pr-sm">
                <q-select
                  outlined
                  v-model="puzzle_store.reveal_letter_location"
                  :options="['outside', 'inside']"
                  label="提示下标位置"
                />
              </div>
              <div class="col-8 q-pb-sm q-pr-sm">
                <q-input v-model="reveal_letters" label="字母提示" outlined />
              </div>
            </div>
          </q-form>
        </div>
        <div class="row q-gutter-sm">
          <div class="col-2">
            <q-btn
              style="width: 100%"
              color="primary"
              label="生成"
              @click="generate_double_puzzle"
            />
          </div>

          <div class="col-2">
            <q-btn style="width: 100%" color="primary" label="重置" />
          </div>
          <div class="col-2">
            <AppExportComponent />
          </div>
        </div>
      </div>
      <div class="col-9">
        <BooKDisplayComponent />
      </div>
    </div>
  </q-page>
</template>
